<script setup lang="ts">
import {onMounted} from "vue";
import {useDevice} from '@/hooks/web/useDevice'

const route = useRoute()
const {mobile} = useDevice()
import {useCommon} from '@/hooks/web/useCommon'
import {ref, reactive} from "vue";

const props = defineProps({
  searchType: Number,
})
const emit = defineEmits(['onSearch'])
let routePath = ref('');
onMounted(() => {
  routePath.value = route.path
  getTeacher('')
  gatherOptions()
  getProjectTree('tree')
})

const {
  teacherOptions,
  optionsBox,
  searchForm,
  mobileShow,
  projectTree,
  handleTime,
  gatherOptions,
  getProjectTree,
  getTeacher
} = useCommon()

const onSearch = () => {
  emit('onSearch')
}

let cascaderRef = ref('')
const applyChange = (value) => {
  if (value) {
    searchForm.type = cascaderRef.value.getCheckedNodes()[0].data.type
  } else {
    searchForm.type = ''
  }
}

let searchFormRef = ref('')
const handleReset = () => {
  searchFormRef.value.resetFields()
  if (teacherOptions.value.length === 1 && routePath.value !== '/commonality/index') {
    searchForm.zixun = teacherOptions.value[0].name
  }
}

defineExpose({searchForm})
</script>

<template>
  <el-form :inline="true" :model="searchForm" class="el-input-form" ref="searchFormRef">
    <el-form-item label="报考院校" v-show="mobileShow || !mobile" prop="school">
      <el-cascader clearable v-model="searchForm.school" :options="projectTree" ref="cascaderRef"
                   :props="{ checkStrictly: true, emitPath: false }" @change="applyChange"></el-cascader>
    </el-form-item>
    <el-form-item label="招生老师"
                  prop="zixun"
                  v-show="mobileShow || !mobile">
      <el-select v-model="searchForm.zixun" placeholder="请选择招生老师" clearable
                 :disabled="teacherOptions.length===1 && routePath!=='/commonality/index'">
        <el-option label="未绑定" value="0"></el-option>
        <el-option v-for="(item, index) in teacherOptions" :label="item.name" :value="item.name"
                   :key="index">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="学生姓名" prop="realname" v-show="mobileShow || !mobile">
      <el-input clearable placeholder="请输入学生姓名" v-model="searchForm.realname">
      </el-input>
    </el-form-item>
    <el-form-item label="联系方式" prop="laidian" v-show="mobileShow || !mobile">
      <el-input clearable placeholder="请输入联系方式" v-model="searchForm.laidian">
      </el-input>
    </el-form-item>

    <el-form-item label="注册时间" prop="reg_date" v-show="mobileShow || !mobile">
      <el-select placeholder="请选择注册时间" v-model="searchForm.reg_date" clearable>
        <el-option v-for="(item,index) in optionsBox.register_list" :label="item.name" :value="item.value"
                   :key="index"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="意向类型" prop="yixiang" v-show="mobileShow || !mobile">
      <el-select v-model="searchForm.yixiang" placeholder="请选择意向类型" clearable>
        <el-option label="无" value="0"></el-option>
        <el-option v-for="(item, index) in optionsBox.yixiang_list" :label="item.name" :value="item.value"
                   :key="index">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="学生来源" prop="laiyuan" v-show="mobileShow || !mobile">
      <el-select v-model="searchForm.laiyuan" placeholder="请选择学生来源" clearable>
        <el-option v-for="(item, index) in optionsBox.laiyuan_list" :label="item.name" :value="item.value"
                   :key="index">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="回访状态" prop="callback" v-show="mobileShow || !mobile">
      <el-select v-model="searchForm.callback" placeholder="请选择回访状态" clearable>
        <el-option label="已回访" value="1"></el-option>
        <el-option label="未回访" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="当前状态" prop="status" v-show="mobileShow || !mobile">
      <el-select v-model="searchForm.status" placeholder="请选择当前状态" clearable multiple collapse-tags
                 :popper-class="'selectCls'">
        <el-option label="无" value="0"></el-option>
        <el-option v-for="(item,index) in optionsBox.status_list"
                   :label="item.name"
                   :value="item.value"
                   :key="index"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="录取状态" prop="luqu_status" v-show="mobileShow || !mobile">
      <el-select v-model="searchForm.luqu_status" placeholder="请选择录取状态" clearable>
        <el-option label="已录取" value="1"></el-option>
        <el-option label="未录取" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item prop="zixun" label="系统时间" v-show="mobileShow || !mobile">
      <el-date-picker v-model="searchForm.time" type="daterange" @focus="handleTime" range-separator="至"
                      value-format="YYYY-MM-DD" :unlink-panels="true" start-placeholder="开始日期"
                      style="width: 100%"
                      end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button v-show="mobile" plain @click="mobileShow = !mobileShow">
        {{ mobileShow ? '取消高级查询' : '高级查询' }}
      </el-button>
      <el-button type="primary" plain @click="onSearch" icon="search">查询</el-button>
      <el-button @click="handleReset" icon="RefreshRight">重置</el-button>
      <slot name="operationBtn"></slot>
    </el-form-item>
  </el-form>
</template>
<style scoped lang="less">
/deep/ .el-button {
  margin-left: 0;
  margin-right: 10px;
}

/deep/ .el-select-dropdown {
  max-height: 650px !important;
}
</style>